<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <div class="cmd-container">
      <div class="cmd-content" v-for="(item, index) in cmdLogs" :key="index">
        <div v-if="!item.result" class="command-input">
          <div class="content-user">
            <div>
              [{{ item.time }} ~{{ item.userName }}# {{ item.folderName }}]
            </div>
          </div>
          <div class="content-excute">
            <div v-if="item.status === 1">
              <el-input
                type="text"
                v-model="item.content"
                :disabled="item.status === 1"
              />
            </div>
            <div
              v-if="item.status === 0"
              @keyup.prevent.enter="cmdExcute(index)"
            >
              <el-input type="text" v-model="item.content" />
            </div>
          </div>
        </div>
        <div v-else v-html="item.result"></div>
      </div>
    </div>
  </PageCard>
</template>
<script>
import PageCard from "@/components/PageCard/index.vue";

import { sendCommand } from "@/api/linux/command";

export default {
  name: "LinuCmdPage",
  components: {
    PageCard,
  },
  data() {
    return {
      command: {
        time: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
        userName: this.$store.getters.info.username,
        content: "",
        status: 0,
        result: null,
        folderPath: "/root",
        folderName: "/",
      },
      cmdLogs: [],
    };
  },
  created() {
    this.$nextTick(() => {
      this.initCmdWindow();
    });
  },
  methods: {
    initCmdWindow() {
      const { folderPath, folderName } = { ...this.command };
      this.createCommand(folderPath, folderName);
    },

    // 执行指令
    async cmdExcute(cmdIndex) {
      const current = this.cmdLogs[cmdIndex];
      const command = current.content.split(" ")[0];
      const content = current.content;
      const commandForm = {
        folderPath: current.folderPath,
        command: command,
        content: content,
      };
      const { code, data } = await sendCommand(commandForm);
      if (code === 200) {
        if (data.result) {
          const { result, folderPath, folderName } = data;
          this.excuteResult(folderPath, folderName, result);
        } else {
          const { folderPath, folderName } = data;
          this.createCommand(folderPath, folderName);
        }
        this.cmdLogs.splice(cmdIndex, 1, { ...current, status: 1 });
      }
    },

    // 执行结果
    excuteResult(folderPath, folderName, result) {
      let resultCommand = { ...this.command };
      resultCommand.result = result;
      resultCommand.folderPath = folderPath;
      resultCommand.folderName = folderName;
      this.cmdLogs.push(resultCommand);

      // 创建一个新的指令
      this.createCommand(folderPath, folderName);
    },

    // 新建执行指令
    createCommand(folderPath, folderName) {
      let newCommand = { ...this.command };
      newCommand.folderPath = folderPath;
      newCommand.folderName = folderName;
      newCommand.status = 0;
      this.cmdLogs.push(newCommand);
    },
  },
};
</script>
<style lang="scss" scoped>
.cmd-container {
  width: calc(100vw - 0px);
  height: calc(100vh - 100px);
  background-color: #303133;
  color: white;
  overflow: scroll;

  .cmd-content {
    margin-left: 0.5%;
    width: 99%;
    overflow: hidden;
    margin-bottom: 10px;

    .command-input {
      & > div {
        float: left;
      }

      & > div:nth-child(1) {
        margin-right: 5px;
      }

      .content-excute {
        height: 20px;
        overflow: hidden;

        .el-input {
          height: 20px;
          width: 95%;
          border: none;

          ::v-deep .el-input__inner {
            height: 20px;
            width: calc(100vw - 490px);
            border: none;
            background-color: #303133;
            color: white;
            cursor: default !important;
          }
        }
      }
    }
  }

  .cmd-content:last-child {
    margin-bottom: 150px;
  }
}
</style>
